<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for='(item,index) in arr'>
                {{index}}--{{item.name}}--{{item.age}}
                <button @click='deleteitem(index)'>删除</button>
                <button @click="replaceitem(index)">替换</button>
            </li>
        </ul>
    </div>
 
    <script>
        /*
        this:在根实例中this指向的是当前实例化出来的对象，然后在这个根实例中写的数据或者方法都直接挂载到了根实例中,
        所以在获取数据时可以通过this.数据名称获取
        组件中的this指向的是当前创建的组件，所以在组件中获取数据是 this.数据名称
        */
        var vm = new Vue({
            el:'#app',
            data:{
                arr:[
                    {name:'Anna',age:18},
                    {name:'Bob',age:19},
                    {name:'xili',age:20}
                ]
            },
            methods:{
                deleteitem(index){
                    // console.log(index);
                    /*spalice(index,num,arg)
                    index:删除或者添加的开始位置（包含）
                    num：删除的个数，如果0表示不删除
                    arg：添加的项*/
                    this.arr.splice(index,1);

                },
                replaceitem(index){
                    const obj={
                        name:'lili',
                        age:10
                    }
                    this.arr.splice(index,1,obj);
                }
            }
        });
        
    </script>
</body>
<html>